/* SPDX-License-Identifier: Apache-2.0 */

/*
  A list of form errors:

  <input aria-describedby="my-field-errors">

  <div id="my-field-errors">
    <ul class="form-errors" role="alert">
      <li>This is a form error</li>
      <li>This is another error</li>
    </ul>
  </div>

  Accessibility:
    - Wrap the error in a div associated with the field via 'aria-describedby'
    - Add 'role=alert'to notify screen readers

  Modifiers:
    - full-width: makes error take entire available horizontal space
*/

.form-errors {
  margin: 5px 0 0;
  padding-bottom: 5px;
  list-style-type: none;
  color: $danger-color;

  li {
    max-width: 350px;

    &::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f06a";
      /*rtl:ignore*/
      margin-right: 5px;
      color: $danger-color;
    }

    a {
      @include danger-underlined-link;
    }
  }

  &--full-width {
    li {
      max-width: 100%;
    }
  }

  .form-error {
    &--valid {
      color: $success-color;

      &::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f00c"; // Check / Tick
        /*rtl:ignore*/
        margin-right: 5px;
        color: $success-color;
      }
    }
  }
}
